html,body{
    padding: 0;
    margin: 0;
    background-color: #f0f0f0;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: #000;
}
header{
    width: 100%;
    height: 60px;
    border-bottom: 5px solid #ccc;
    padding: 0 50px;
    line-height: 60px;
    color: #000;
   
    display: flex;
    box-sizing: border-box;
}

header ul {
    display: flex;
}
header ul li{
    padding: 0 20px;
    box-sizing: border-box;
}

header .search input{
    padding: 8px 5px;
    border: none;
    outline: none;
    width: 300px;
}

header .glass{
    width: 20px;
    height: 20px;
    position: relative;
    top: 5px;
}
.my{
    color: blue;
}

.logo{
    font-weight: 700;
    font-size: 20px;
    margin-right: 35px;
}
header .register,header .login{
    margin: 0 20px;
}
header .user{
    margin-left: auto;
    display: flex;
}

#root{
    width: 1500px;
    margin: 30px auto;
}

#root .img img{
    width: 100%;
}



.notice{
    width: 100%;
    min-height: 300px;
    background-color: rgb(35,3,8);
    padding: 10px 50px;
    box-sizing: border-box;
    margin: 10px 0;
}
.notice h1{
    color: rgb(255,255,203);
    text-align: center;
}
.notice p{
    width: 100%;
    min-height: 160px;
    background-color: rgb(255,255,203);
    border-radius: 30px;
    padding: 20px;
    box-sizing: border-box;
    text-indent: 2em;
    border: 3px solid rgb(253,198,7);
}








.types{
    display: flex;
    flex: 1;
    flex-flow: row wrap;
}
.types ul{
    padding: 15px;
    box-sizing: border-box;
    height: 370px;
    width: 33.3%;
    background-clip: content-box;
}
.types ul li{
    margin: 8px 0;
    /* width: 80%; */

   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
li a,header .login a,header .regrister a{
    color: #000;
    text-decoration: none;
}
li a:hover header .login a:hover,header .regrister a:hover{
    color: #8c8c8c;
}


.types ul li:first-child{
    font-size: 18pt;
    font-weight: 700;
    display: flex;

}


